<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:37:57
-->
<template>
  <div class="page-warp">
    <ItemWrap4 title="加油站数量" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <Top style="margin-top: 0px" />
    </ItemWrap4>
    <ItemWrap4 title="加油油品" v-if="type != 'Center'" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <Bottom style="margin-top: 0px" />
    </ItemWrap4>
    <ItemWrap4 title="加油量趋势" v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BigTopCenter style="margin-top: 0px" />
    </ItemWrap4>
    <ItemWrap4 title="加油油品" v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BigTopRight style="margin-top: 0px" />
    </ItemWrap4>
    <!--  -->
    <ItemWrap4 title="加油站所属公司" v-if="type === 'Center'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomCenter style="margin-top: 0px" />
    </ItemWrap4>
    <ItemWrap4 title="站点加油量排名" v-if="type === 'Center'"
      style="width: 815px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomRight style="margin-top: 0px;" />
    </ItemWrap4>
  </div>
</template>

<script>
import Top from './top.vue';
import Bottom from './bottom.vue';
import BigTopCenter from './big-top-center.vue';
import BigTopRight from './big-top-right.vue';
import BigBottomCenter from './big-bottom-center.vue';
import BigBottomRight from './big-bottom-right.vue'

export default {
  name: 'ARightRight',
  components: {
    Top,
    Bottom,
    BigTopCenter,
    BigTopRight,
    BigBottomCenter,
    BigBottomRight
  },
  props: {
    type: {
      type: String,
      default: 'RightRight',
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.page-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // margin: auto 40px;
  align-items: center;
}
</style>
